<template>
	<div class="pt-4 px-[25px] md:px-[35px] pb-10">
		<div class="-mx-2">
			<WalletRecentlyCurrency
				v-model:currency="selectedCurrency"
				@click:more="dropdownCurrencyRef?.onClickShow()" />
		</div>
		<WalletSelectCurrency
			ref="dropdownCurrencyRef"
			v-model:currency="selectedCurrency"
			v-model:currency-item="selectedCurrencyItem"
			v-model:network="selectedNetwork"
			v-model:network-item="selectedNetworkItem" />
		<deposit-activity :currency-to="selectedCurrencyItem?.currency" />
		<template
			v-if="
				selectedNetworkItem && !walletStore.loading.createWallet && !walletStore.loading.balanceList
			">
			<div class="p-3 rounded-lg bg-bg-2">
				<div class="flex">
					<div class="self-center flex-shrink-0 size-[120px]">
						<div
							v-if="selectedNetworkItem?.walletAddress"
							class="size-[120px] p-[4px] rounded-sm bg-white">
							<n-qr-code
								:value="selectedNetworkItem?.walletAddress"
								:icon-src="getCurrencyIcon(selectedCurrencyItem?.currency)"
								:icon-size="36"
								:size="112"
								type="svg"
								class="!p-0" />
						</div>
					</div>
					<div class="flex-auto ml-3">
						<div class="mb-[6px]">
							{{
								`${selectedCurrencyItem?.appName} - ${selectedNetworkItem?.cpnDisplay || selectedNetworkItem?.cpn} ${$t('wallet.address')}`
							}}
						</div>
						<n-input
							:value="selectedNetworkItem?.walletAddress || ''"
							type="textarea"
							class="mb-[6px] text-sm [&_textarea]:!break-all"
							style="
								--n-color: var(--color-bg-3);
								--n-color-focus: var(--color-bg-3);
								--n-border-hover: transparent;
								--n-border-focus: transparent;
							"
							readonly
							:autosize="{ minRows: 1, maxRows: 2 }" />
						<BaseCopy :value="selectedNetworkItem?.walletAddress">
							<BaseButton class="h-8 mb-[6px]">
								<base-icon name="copy" class="text-lg text-t-2" />
								<span class="text-sm text-t-1">{{ $t('wallet.copyAddress') }}</span>
							</BaseButton>
						</BaseCopy>
						<template v-if="selectedNetworkItem.memo">
							<BaseInput
								:modelValue="selectedNetworkItem?.memo || ''"
								labelT="wallet.address.memoTag"
								class="!mb-0 text-sm"
								inputWrapperClass="h-9"
								contentClass="bg-bg-3"
								inputClass="!text-t-1"
								readonly>
								<template #suffix>
									<base-copy :value="selectedNetworkItem?.memo" />
								</template>
							</BaseInput>
						</template>
					</div>
				</div>
				<div class="h-3" />
				<base-tip
					name="about"
					:textT="[
						'wallet.address.tip.deposit',
						[selectedNetworkItem?.cpnDisplay || selectedNetworkItem.cpn]
					]" />
				<template v-if="selectedNetworkItem.memo">
					<div class="h-1" />
					<base-tip name="about" text-t="wallet.address.memoTagRequired" />
				</template>
			</div>
		</template>
		<template v-else>
			<div class="flex justify-center py-[47px]">
				<BaseLoadingCircle />
			</div>
		</template>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
	BaseButton,
	BaseCopy,
	BaseDropdown,
	BaseIcon,
	BaseInput,
	BaseLoadingCircle,
	BaseTip
} from '@/components/base'
import { NQrCode } from 'naive-ui'
import { BalanceItem, NetworkAddressItem } from '@/types'
import DepositActivity from '@/views/wallet-new/wallet-deposit/deposit-activity.vue'
import { WalletRecentlyCurrency, WalletSelectCurrency } from '@/components/wallet'
import { CurrencyEnum } from '@/enums'
import { useWalletStore } from '@/store'
import { getCurrencyIcon } from '@/utils'

defineOptions({ name: 'ViewsWalletDepositCrypto' })

const walletStore = useWalletStore()
const selectedCurrency = ref<CurrencyEnum | ''>('')
const selectedCurrencyItem = ref<BalanceItem>()
const selectedNetwork = ref('')
const selectedNetworkItem = ref<NetworkAddressItem>()
const dropdownCurrencyRef = ref<InstanceType<typeof BaseDropdown>>()
</script>

<style scoped></style>
